import React, { PureComponent } from 'react'
import { Row, Col } from 'antd';
import styles from './index.less'
export default class QuestionButtons extends PureComponent<any, any> {
    onClick = (index: number, currentQuestion: any) => () => {
        const { type, onClick } = this.props;
        onClick(index, type, currentQuestion)
    }
    render() {
        const { data, currentIndex, answers } = this.props;
        const renderClass = (index:number) => {
            if(answers[index].marked){
                return styles['question-button-marked']
            }
            if(answers[index].marked && !answers[index].answer){
                return styles['question-button-marked']
            }
            if(answers[index].marked && answers[index].answer){
                return  styles['question-button-finish']
            }
            if(!answers[index].marked && answers[index].answer){
                return  styles['question-button-finish']
            }
            if(answers[index].notFinish && !answers[index].answer){
                return  styles['question-button-not-finish']
            }
            return  styles['question-button']
        }
        return (
            <div className={styles['question-buttons']}>
                <Row gutter={10}>
                    {
                        data&&data.map((item: any, index: number) => {
                            return <Col span={4} key={item.id}>
                                <div onClick={this.onClick(index, item)}
                                    style={{ backgroundColor: currentIndex === index ? '#1890ff' : '' }}
                                    className={renderClass(index)}> 
                                    {index + 1}
                                </div>
                            </Col>
                        })
                    }
                </Row>
            </div>
        )
    }
}
